<!-- BEGIN: Subheader -->
<div class="m-subheader">
    <div class="d-flex align-items-center">
        <div class="mr-auto">
            <h3 class="m-subheader__title">
            </h3>
            <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
                <li class="m-nav__item m-nav__item--home">
                    <a href="#" class="m-nav__link m-nav__link--icon">
                        <i class="m-nav__link-icon la la-home"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div>
        </div>
    </div>
</div>
<!-- END: Subheader -->

<div class="m-content">

    <div class="m-portlet m-portlet--mobile">
        <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                    <h3 class="m-portlet__head-text">
                        数据列表
                    </h3>
                </div>
            </div>
            <div class="m-portlet__head-tools">
                <!--<button class="btn btn-primary float-right" (click)="refresh()">-->
                    <!--<span class="fa fa-refresh"></span> <span>刷新</span>-->
                <!--</button>-->
            </div>
        </div>
        <div class="m-portlet__body">
            <div *ngIf="audits">
                <div class="row">
                    <div class="col-md-5">
                        <h4>过滤根据日期</h4>
                        <div class="input-group mb-3">
                            <div class="input-daterange input-group" id="m_datepicker_5">
                                <input type="date" class="form-control" name="start" [(ngModel)]="fromDate" (ngModelChange)="onChangeDate($event)" required/>
                                <span class="input-group-addon">
								<i class="la la-ellipsis-h"></i>
							</span>
                                <input type="date" class="form-control" name="end" [(ngModel)]="toDate" (ngModelChange)="onChangeDate($event)" required/>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-responsive d-table">
                        <thead>
                        <tr>
                            <th (click)="orderProp = 'timestamp'; reverse=!reverse"><span>日期</span></th>
                            <th (click)="orderProp = 'principal'; reverse=!reverse"><span>用户</span></th>
                            <th (click)="orderProp = 'type'; reverse=!reverse"><span>状态</span></th>
                            <th (click)="orderProp = 'data.message'; reverse=!reverse"><span>其他</span></th>
                        </tr>
                        </thead>
                        <tr *ngFor="let audit of getAudits()">
                            <td><span>{{audit.timestamp| date:'yyyy-MM-dd hh:mm:ss.sss'}}</span></td>
                            <td><small>{{audit.principal}}</small></td>
                            <td>{{audit.type}}</td>
                            <td>
                                <span *ngIf="audit.data" ng-show="audit.data.message">{{audit.data.message}}</span>
                                <span *ngIf="audit.data" ng-show="audit.data.remoteAddress"><span>远程地址</span> {{audit.data.remoteAddress}}</span>
                            </td>
                        </tr>
                    </table>
                </div>
                <div *ngIf="audits">
                    <div class="row">
                        <div class="col-md-6">
                            <!--<jhi-item-count [page]="page" [total]="totalItems" [itemsPerPage]="itemsPerPage"></jhi-item-count>-->
                            显示第 {{((page - 1) * itemsPerPage) == 0 ? 1 : ((page - 1) * itemsPerPage + 1)}} -
                            {{(page * itemsPerPage) < totalItems ? (page * itemsPerPage) : totalItems}}
                            条，共 {{totalItems}} 条
                        </div>
                    </div>
                    <div class="row justify-content-end">
                        <ngb-pagination [collectionSize]="totalItems" [(page)]="page" [pageSize]="itemsPerPage" [maxSize]="5" [rotate]="true" [boundaryLinks]="true" (pageChange)="loadPage(page)"></ngb-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
